<script setup>
import { ref, reactive, computed, onMounted } from "vue";
const FormData = reactive({
  title: "",
  date: "",
  isEditIndex: [],
});
const currentIndex = ref(0);
const lists = ref([]);
onMounted(() => {
  lists.value = JSON.parse(localStorage.getItem("lists")) || [];
});
const displayArr = computed(() => {
  return lists.value.slice(currentIndex.value, currentIndex.value + 10);
});

const handleSubmit = () => {
  if (!FormData.title || !FormData.date) return alert("请填写完整");
  lists.value.push({ ...FormData });
  localStorage.setItem("lists", JSON.stringify(lists.value));
  FormData.title = "";
  FormData.date = "";
};
const handleAdd = () => {
  lists.value.forEach((item, index) => {
    if (FormData.isEditIndex === index) {
      lists.value[index] = { ...FormData };
      localStorage.setItem("lists", JSON.stringify(lists.value));
      FormData.title = "";
      FormData.date = "";
    }
  });
};
const handleDelete = (index) => {
  //删除掉当前的这一项
  lists.value.splice(index, 1);
  localStorage.setItem("lists", JSON.stringify(lists.value));
};
const handleChange = (index) => {
  //修改当前的这一项
  FormData.isEditIndex = index;
  FormData.title = lists.value[index].title;
  FormData.date = lists.value[index].date;
};

const onScroll = (e) => {
  const scrollTop = e.target.scrollTop;
  currentIndex.value = Math.floor(scrollTop / 30);
  console.log(currentIndex.value);
};
// const state = reactive<MarkState>({
//   // 当前正在拖拽的元素索引
//   oldItemIndex: -1,
//   // 将插入的目标位置索引
//   newItemIndex: -1,
// });

const getIndex = (arr, item) => {
  for (var i in arr) {
    if (arr[i] == item) {
      return i;
    }
  }
};

const onDragStart = (e,index) => {
  e.dataTransfer.setData(
    "text/plain",
    index
  );
  // console.log("当前操作项", e.target);
  console.log(index);
  // console.log(getIndex(document.querySelector('.scroll').childNodes,e.target));
};
//放置元素
const dragover = (e) => {
  e.preventDefault();
};
const drop = (e, index) => {
  e.preventDefault();
  // console.log(1);
  const originIndex = parseInt(e.dataTransfer.getData("text/plain"));
  // drop 时改变顺序
  const item = lists.value.splice(originIndex, 1)[0];
  lists.value.splice(index, 0, item);
};
</script>
<template>
  <div class="box">
    标题
    <input
      v-model="FormData.title"
      class="title"
      type="text"
      placeholder="请输入代办标题"
    />
    日期
    <input
      v-model="FormData.date"
      class="date"
      type="date"
      placeholder="请选择日期"
    />
    <br />
    <button @click="handleSubmit">确认提交</button>
    <br />
    <button @click="handleAdd">确认修改</button>
  </div>
  <!-- 表格部分 -->
  <table>
    <!-- 表头 -->
    <thead class="head">
      <tr>
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- body -->
    <tbody class="container" @scroll="onScroll">
      <div class="scroll" :style="{ height: lists.length * 30 + 'px' }">
        <div
          class="placeholder"
          :style="{ height: currentIndex * 30 + 'px' }"
        ></div>

        <tr
          @dragover="dragover($event)"
          @drop="drop($event,index)"
          draggable="true"
          @dragstart="onDragStart($event, index)"
          v-for="(item, index) in displayArr"
          :key="index"
          style="height: 30px"
        >
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="handleDelete(index)">删除</button>
            <button @click="handleChange(index)">修改</button>
          </td>
        </tr>
      </div>
    </tbody>
  </table>
</template>

<style lang="less">
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #ccc;
}
.container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 300px;
  display: block;
}
.head,
.container tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  th {
    border: 1px solid #ccc;
  }
  td {
    border: 1px solid #ccc;
  }
}
table tbody::-webkit-scrollbar {
  width: 5px;
}
table tbody::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 5px;
}
table tbody::-webkit-scrollbar-track {
  background-color: #d6d6d6;
}
table tbody::-webkit-scrollbar-thumb:hover {
  background-color: rgb(236, 112, 166);
}
</style>
